<nz-card>
  <div class="mb-md">
    <label> 编号:
      <input nz-input [(ngModel)]="this.searchBeans[0].attributeValue" style="width: 150px;"
             class="mr-sm"/>
    </label>
    <label> 名称:
      <input nz-input [(ngModel)]="this.searchBeans[1].attributeValue"  style="width: 150px;"
             class="mr-sm"/>
    </label>

    <button nz-button (click)="this.loadListData()" [nzType]="'primary'">搜索</button>
    <button nz-button (click)="this.clearParam(); this.loadListData()">重置</button>
  </div>

  <nz-divider [nzDashed]=true  style="margin: 0;padding: 0"></nz-divider>

  <div style="padding: 10px;">
    <button nz-button (click)="open()" [nzType]="'primary'">新增</button>
    <button nz-button nz-popconfirm
            nzPopconfirmTitle="确认删除选中吗?"
            nzPopconfirmPlacement="right"
            (nzOnConfirm)="delete()"
            (nzOnCancel)="cancel()">删除
    </button>
  </div>

  <nz-table #basicTable [nzData]="deviceGroups" [nzLoading]="loading" nzSize="small">
    <thead>
    <tr>
      <th>编号</th>
      <th>名称</th>
      <th>状态</th>
      <th>操作区</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of basicTable.data">
      <td>{{data.code}}</td>
      <td>{{data.name}}</td>
      <td>
        <nz-tag nzColor="{{data.status === 1 ? 'success' : 'error'}}">{{data.status === 1 ? '启用' : '禁用'}}</nz-tag>
      </td>
      <td>
        <a nz-button nzType="link" (click)="openEdit(data)"><i nz-icon nzType="edit"></i>编辑</a>
        <a nz-button nzType="link" (click)="delete(data.id)"><i nz-icon nzType="delete"></i>删除</a>
      </td>
    </tr>
    </tbody>
  </nz-table>
</nz-card>

<app-device-group-edit #deviceGroupEditComponent (voted)="onSmt()"></app-device-group-edit>
